<script setup>
import { ref, defineProps } from "vue";
import router from "@/router";
import { getUserTopicsService } from "@/api/user";
import { showToast, showLoadingToast } from "@/utils/vant-ui";
import { searchTopics } from "@/api/topic";
const onClickLeft = () => {
  router.back();
};

// 响应式数据
const topicList = ref([]);
const total = ref(0);
const pages = ref(0);
const pageNum = ref(1);
const pageSize = ref(9);
const loading = ref(false);
const jumpPage = ref(""); // 跳转页码输入

const props = defineProps({
  model: {
    type: String,
    required: true,
  },
  query: {
    type: String,
    required: true,
  },
});
console.log(props.model);
console.log(props.query + 11);
// 每页条数选项
const pageSizeOptions = [
  { text: "9条/页", value: 9 },
  { text: "12条/页", value: 12 },
  { text: "15条/页", value: 15 },
  { text: "18条/页", value: 18 },
];

// 获取话题数据
const fetchTopics = async () => {
  try {
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
    });
    loading.value = true;
    const res = await getUserTopicsService(
      router.currentRoute.value.query.id,
      pageNum.value,
      pageSize.value,
    );
    if (res.code === 200) {
      topicList.value = res.data.list;
      total.value = res.data.total;
      pages.value = res.data.pages;
    } else {
      showToast("获取话题列表失败");
    }
  } catch (error) {
    console.error("获取话题错误:", error);
    showToast("获取话题列表时发生错误");
  } finally {
    loading.value = false;
  }
};
// 查询话题数据
const queryTopics = async () => {
  try {
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
    });
    loading.value = true;
    const res = await searchTopics(props.query);
    // console.log(res.data.data);
    topicList.value = res.data.data;
    total.value = topicList.value.length;
    pages.value = Math.ceil(total.value / pageSize.value);
    // 将数组根据pageSize和pageNum分页
    topicList.value = topicList.value.slice(
      (pageNum.value - 1) * pageSize.value,
      pageNum.value * pageSize.value,
    );
    console.log(topicList.value);
  } catch (error) {
    console.error("查询话题错误:", error);
    showToast("查询话题列表时发生错误");
  } finally {
    loading.value = false;
  }
};

// 处理页码变化
const handlePageChange = (page) => {
  pageNum.value = page;
  if (props.model === "userTopic") {
    fetchTopics();
  } else if (props.model === "queryTopic") {
    queryTopics();
  }
  window.scrollTo(0, 0);
};

// 处理每页条数变化
const handlePageSizeChange = (newSize) => {
  pageSize.value = newSize;
  pageNum.value = 1; // 重置到第一页
  if (props.model === "userTopic") {
    fetchTopics();
  } else if (props.model === "queryTopic") {
    queryTopics();
  }
};

// 处理页码跳转
const handleJumpPage = () => {
  const page = parseInt(jumpPage.value);
  if (isNaN(page) || page < 1 || page > pages.value) {
    showToast(`请输入有效页码(1-${pages.value})`);
    return;
  }
  pageNum.value = page;
  jumpPage.value = "";
  if (props.model === "userTopic") {
    fetchTopics();
  } else if (props.model === "queryTopic") {
    queryTopics();
  }
  window.scrollTo(0, 0);
};

if (props.model === "userTopic") {
  fetchTopics();
} else if (props.model === "queryTopic") {
  queryTopics();
}
const getFromName = (value) => {
  if (value) {
    return "用户发布";
  }
};
</script>

<template>
  <div class="topic-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      v-if="model === 'userTopic'"
      title="所有话题"
      left-arrow
      safe-area-inset-top
      @click-left="onClickLeft"
    />
    <!-- 话题列表 -->
    <div class="topic-list">
      <van-list :finished="pages === pageNum" finished-text="没有更多了">
        <div v-for="topic in topicList" :key="topic.id" class="topic-card">
          <div class="topic-header">
            <span class="topic-name">{{ topic.topicName }}</span>
            <van-tag type="primary" size="small" class="topic-type">
              类型{{ topic.topicType }}
            </van-tag>
          </div>

          <div v-if="model === 'userTopic'" class="topic-stats">
            <div class="stat-item">
              <van-icon name="fire" color="#ff976a" />
              <span>热度: {{ topic.topicHot }}</span>
            </div>
            <div class="stat-item">
              <van-icon name="chat" color="#1989fa" />
              <span>发言: {{ topic.topicSpeeches }}</span>
            </div>
            <div class="stat-item">
              <van-icon name="like" color="#ee0a24" />
              <span>点赞: {{ topic.topicLikes }}</span>
            </div>
          </div>
          <!-- content话题内容  和 发表话题的人 的idtopicFromId -->
          <div v-else>
            <div class="topic-content">{{ topic.content }}</div>
            <div class="topic-from">
              发表话题的人: {{ getFromName(topic.topicFromId) }}
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 分页控件和功能区域 -->
    <div class="pagination-container">
      <!-- 每页条数选择 -->
      <div class="page-controls">
        <van-dropdown-menu :overlay="false" class="page-size-selector">
          <van-dropdown-item
            class="page-size-selector-content"
            v-model="pageSize"
            :options="pageSizeOptions"
            @change="handlePageSizeChange"
          />
        </van-dropdown-menu>

        <!-- 页码跳转 -->
        <div class="page-jump">
          <van-field
            v-model="jumpPage"
            type="number"
            placeholder="页码"
            class="jump-input"
            :min="1"
            :max="pages"
          />
          <van-button
            type="primary"
            size="small"
            @click="handleJumpPage"
            class="jump-button"
          >
            跳转
          </van-button>
        </div>
      </div>
      <!-- 分页器 -->
      <van-pagination
        class="van-pagination"
        v-model="pageNum"
        :page-count="pages"
        :items-per-page="pageSize"
        :total-items="total"
        mode="simple"
        @change="handlePageChange"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>
    </div>
    <div></div>
  </div>
</template>

<style lang="less" scoped>
.topic-page {
  min-height: 100vh;
  background-color: #f5f6f8;
  padding-bottom: 100px; /* 增加底部空间 */

  // 话题列表样式
  .topic-list {
    padding: 12px;

    .topic-card {
      background: #fff;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      .topic-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .topic-name {
          font-size: 16px;
          font-weight: 600;
          color: #323233;
          flex: 1;
          margin-right: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .topic-type {
          flex-shrink: 0;
        }
      }

      .topic-stats {
        display: flex;
        justify-content: space-around;

        .stat-item {
          display: flex;
          align-items: center;
          font-size: 13px;
          color: #969799;

          .van-icon {
            margin-right: 4px;
          }
        }
      }
      .topic-content {
        // 话题内容,不能超出父组件，超出部分用省略号表示
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }

  // 分页容器样式
  .pagination-container {
    position: fixed;
    bottom: var(--van-nav-bar-height);
    left: 0;
    width: 100%;
    height: 100px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    border-radius: 5px;

    .page-controls {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      // margin-bottom: 12px;

      .page-size-selector {
        // display: inline-block;
        width: 100px;

        // height: 200px;
        .page-size-selector-content {
          // margin-left: 10px;
          width: 140px;
          height: 100px;
          border: 1px solid #dcdfe6;
          border-radius: 5px;
        }
      }

      .page-jump {
        display: flex;
        align-items: center;
        margin-left: auto;

        .jump-input {
          width: 60px;
          margin-right: 8px;
          border: 1px solid #dcdfe6;

          // :deep(.van-field__control) {
          //   text-align: center;
          // }
        }
      }
    }
  }
}
</style>
